body {
	
	
	font-family: Helvetica ,arial,sans-serif;
	color : #333;
    margin:0px;
	width:100%;
    height:100%;
}
div
{
	display: block;
}
a
{
	text-decoration: underline;
	color : inherit;
}

#warper_main
{
	width: 900px;
    margin: auto;
}

header {
	height : 130px;
	margin-bottom : 50px;
	margin-top : 20px;
}

article, aside {

    display: inline-block;
    vertical-align: top;
    text-align: justify;
}

/*contact list*/
aside {
	position: relative;
	width : 200px;
	/*height: 800px;*/
	padding-bottom: 20px;
}

aside h1
{
	margin-left : 10px;
	font-family: "Roboto3", Helvetica, sans-serif;
	font-size: 22px;
}

article
{
    width: 675px;
    margin-left: 20px;
    
}

footer {
	

}



section{

}	

.content
{
	
}



.title
{
	background-color : white;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	width : 100%;
	font-size : 25px;
	text-shadow: 1px 1px 1px white;
	padding : 5px;

}

.title span
{
	display : block;
	margin-left : 70px;
	margin-bottom : 5px;
}

.date
{
	display : block;
	text-shadow: none;
	font-size: 15px;
	position : relative;
	left : 20px;
}	

.profilImg
{
	height : 50px;
	width : 50px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	margin : 5px;
	margin-bottom:  0px;
	vertical-align: middle;
}

.contactImg
{
	vertical-align: baseline;
	vertical-align: bottom;
}


@-webkit-keyframes slideouttoright {
	from { -webkit-transform: translateX(0); }
	to { -webkit-transform: translateX(100%); }
}

@-webkit-keyframes slideinfromleft {
	from { -webkit-transform: translateX(-100%); }
	to { -webkit-transform: translateX(0); }
}

@-webkit-keyframes slideinfromright {
	from { -webkit-transform: translateX(100%); }
	to { -webkit-transform: translateX(0); }
}

@-webkit-keyframes slideinfromtop {
	from { -webkit-transform: translateY(-100%); }
	to { -webkit-transform: translateY(0); }
}

@-webkit-keyframes slideinfrombottom {
	from { -webkit-transform: translateY(100%); }
	to { -webkit-transform: translateY(0); }
}

.buttonVert
{
		background-color: #3D9400;
		background-image: -webkit-linear-gradient(top,#3d9400,#398a00);
		background-image: -moz-linear-gradient(top,#3d9400,#398a00);
		background-image: -ms-linear-gradient(top,#3d9400,#398a00);
		background-image: -o-linear-gradient(top,#3d9400,#398a00);
		background-image: linear-gradient(top,#3d9400,#398a00);
		border: 1px solid #29691D;
		color: white;
		text-shadow: 0 1px rgba(0, 0, 0, 0.1);
		border-image: initial;

		-webkit-border-radius: 2px;
		-moz-border-radius: 2px;
		border-radius: 2px;
		cursor: default;
		font-size: 20px;
		font-weight: bold;
		text-align: center;
		margin-right: 16px;
		height: 27px;
		line-height: 27px;
		min-width: 54px;
		outline: 0;
		padding: 10px 26px;
		vertical-align: middle;
		font-family : "Roboto3", Helvetica, sans-serif;
}

.buttonBleu
{
		background-color: #4D90FE;
		background-image: -webkit-linear-gradient(top,#4d90fe,#4787ed);
		background-image: -moz-linear-gradient(top,#4d90fe,#4787ed);
		background-image: -ms-linear-gradient(top,#4d90fe,#4787ed);
		background-image: -o-linear-gradient(top,#4d90fe,#4787ed);
		background-image: linear-gradient(top,#4d90fe,#4787ed);
		border: 1px solid #3079ED;
		color: white;
		text-shadow: 0 1px rgba(0, 0, 0, 0.1);
		border-image: initial;
		

		-webkit-border-radius: 2px;
		-moz-border-radius: 2px;
		border-radius: 2px;
		cursor: default;
		font-size: 20px;
		font-weight: bold;
		text-align: center;
		margin-right: 16px;
		height: 27px;
		line-height: 27px;
		min-width: 54px;
		outline: 0;
		padding: 10px 26px;
		vertical-align: middle;
		font-family : "Roboto3", Helvetica, sans-serif;
}

.SMSform
{
	background: white;
	border: 1px solid #999; /*avant #CCC*/
	border-top-color: #999;
	margin : 0px;
	padding : 0px;
	font-family: 'Open Sans',arial,sans-serif;
	color : #333;
	width :98%;
	box-sizing: border-box;
	margin-top : 10px;
}

.SMStxt
{
	margin-left: 5px;
}

.SMSdest
{
	
}



.loginForm
{
	margin:auto;
	padding: auto;
	margin-top : 100px;
	width: 40%
}


.logoImg
{
	height : 200px;
	width: 200px;
	vertical-align: -50px;
	padding : auto;
	margin : auto;
}

/*titre*/
.logoTxt
{
	font-family : "Roboto1", Helvetica, sans-serif;
	color : #6BC1D1;
	font-size: 7em;
	display : inline;
	padding : auto;
	margin : auto;
	margin-left: 50px;
	text-align : left;
}

.logoTxtSec
{
	font-family : "Roboto2", Helvetica, sans-serif;
	color : black;
	font-size: 35px;
	display : inline;
	padding : auto;
	margin : auto;
	margin-left: 50px;
	text-align : left;
}

.logoTxt_Min
{
	font-size: 80px;
	margin-left: 0px;
}

.logoTxtSec_Min
{
	font-size: 20px;
	font-family: "RobotoCondensedItalic", Helvetica, sans-serif;
	margin-left: 0px;
}

.logoImg_Min
{
	height : 100px;
	width: 100px;
}
.div_logo
{
	padding : auto;
	margin : auto;
	display : inline-block;
	width: 50%;
	text-align: center;
}

@font-face {
	font-family: 'Roboto1';
	src: url('../font/Roboto-BoldCondensed.ttf');
}

@font-face {
	font-family: 'Roboto2';
	src: url('../font/Roboto-Thin.ttf');
}

@font-face {
	font-family: 'Roboto3';
	src: url('../font/Roboto-Light.ttf');
}

@font-face {
	font-family: 'RobotoCondensedItalic';
	src: url('../font/Roboto-CondensedItalic.ttf');
}

.div_User_Infos
{
	width: 48%;
	float : right;
	display: inline-block;
	text-shadow: 1px 1px 1px white;
	color : #666;
	font-size: 15px;
}

.div_User_Infos ul
{
	margin-bottom : 0px;
	margin-top : 10px;
}

.UserName
{
	font-size: 20px;
}

.blocGris
{
	background-color : #F1F1F1;
	border-radius: 5px;
	box-shadow: 2px 2px 2px gray;
	margin-bottom : 10px;
}

.blocBlanc
{
	background-color : white;
	border-radius: 5px;
}

.div_sender
{
	margin:auto;
	padding: auto;
	width : 100%;
	/*height : 267px;*/
	text-align: center;
	padding-bottom: 20px;
}

.contactListItem
{
	width: 196px;
	/*height: 60px;*/
	height : auto;
	margin : 2px;
	margin-top: 0px;
	padding-bottom: 4px;
}

.contactListItemSelected
{
	background-color: lightblue;
}

.ContactListImg
{
	width: 25px;
	height : 25px;
	vertical-align: middle;
	float: right;
	margin-left : 4px;
}

.contactPhoneNumber
{
	font-size: 15px;
}

.conv_div
{
	text-shadow: 1px 1px 1px white;
	color: #666;
}

.conv_div h1
{
	padding : 5px;
	margin : 0px;
}

.conv_table
{
	width: 100%;
}

.convIconCell
{
	width : 42px;
	text-align: left;
}

.conv_moi
{
	text-align: right;
	background-color: white;
}

.convIcon
{
	height: 20px;
	width: 20px;
	vertical-align: top;
}

.conv_lui
{
	text-align: left;
	/*background-color: #6BC1D1;*/
	background-color: lightblue;
}

.conv_name_lui
{
	font-weight: bold;
	float : left;
	margin-right : 15px;
	margin-left : 10px; 
}

.conv_name_moi
{
	font-weight: bold;
	float : right;
	margin-left : 15px; 
	margin-right : 10px; 
}

.conv_table tr:FIRST-CHILD td
{
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}

.conv_table tr:LAST-CHILD td
{
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

.cercle
{
	display:inline-block;
	width: 18px;
	height : 18px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	border : 2px solid #eee;
}

.scrollable
{
	overflow:auto;
}